// 点击查看试题详情
<template>
	<div id="msg">
		<a href="http://localhost:8088/#/collection" class="back"><返回</a>
		<div class="title">
			<span>试题收藏列表</span>
			<span>/试题详情</span>
		</div>
		
		<div class="content">

			<el-collapse class="inner" v-model="activeName">
				<!-- 单选题 -->
				<div v-if="subject=='B1'">
					<el-collapse-item name="1">
						<template slot="title" name="1">
							<div class="titlei">{{this.choosesingle.chooseType=='1'?'单选题':'单择题'}}({{this.choosesingle.chooseLevel}})
							</div>
						</template>
						<div class="contenti">
							<ul class="question">
								<li>
									<h3>{{this.choosesingle.chooseName}}</h3>
								</li>
								<li><span data-v-24efad91 class="el-tag el-tag--success el-tag--light" style="margin-bottom: 3px;">A</span>
									{{this.choosesingle.chooseA}}</li>
								<li><span data-v-24efad91 class="el-tag el-tag--success el-tag--light" style="margin-bottom: 3px;">B</span>
									{{this.choosesingle.chooseB}}</li>
								<li><span data-v-24efad91 class="el-tag el-tag--success el-tag--light" style="margin-bottom: 3px;">C</span>
									{{this.choosesingle.chooseC}}</li>
								<li><span data-v-24efad91 class="el-tag el-tag--success el-tag--light" style="margin-bottom: 3px;">D</span>
									{{this.choosesingle.chooseD}}</li>
								<li>我的答案：{{this.answer.answerContent}}</li>
								<li>参考答案：{{this.choosesingle.chooseRight}}</li>
							</ul>
						</div>
					</el-collapse-item>
					<el-collapse-item name="1">
						<template slot="title" name="2">
							<div class="titlei">试题解析</div>
						</template>
						<div class="contenti">
							<ul class="question">
								<li>{{this.choosesingle.analysis}}</li>
							</ul>
						</div>
					</el-collapse-item>
				</div>
				<!-- 多选题 -->
				<div v-if="subject=='B2'">
					<el-collapse-item name="1">
						<template slot="title" name="1">
							<div class="titlei">{{this.choosemult.chooseType=='2'?'多选题':'多选题'}}({{this.choosemult.chooseLevel}})
							</div>
						</template>
						<div class="contenti">
							<ul class="question">
								<li>
									<h3>{{this.choosemult.chooseName}}</h3>
								</li>
								<li><span data-v-24efad91 class="el-tag el-tag--success el-tag--light" style="margin-bottom: 3px;">A</span>
									{{this.choosemult.chooseA}}</li>
								<li><span data-v-24efad91 class="el-tag el-tag--success el-tag--light" style="margin-bottom: 3px;">B</span>
									{{this.choosemult.chooseB}}</li>
								<li><span data-v-24efad91 class="el-tag el-tag--success el-tag--light" style="margin-bottom: 3px;">C</span>
									{{this.choosemult.chooseC}}</li>
								<li><span data-v-24efad91 class="el-tag el-tag--success el-tag--light" style="margin-bottom: 3px;">D</span>
									{{this.choosemult.chooseD}}</li>
								<li>我的答案：{{this.answer.answerContent}}</li>
								<li>参考答案：{{this.choosemult.chooseRight}}</li>
							</ul>
						</div>
					</el-collapse-item>
					<el-collapse-item name="1">
						<template slot="title" name="2">
							<div class="titlei">试题解析</div>
						</template>
						<div class="contenti">
							<ul class="question">
								<li>{{this.choosemult.analysis}}</li>
							</ul>
						</div>
					</el-collapse-item>
				</div>
				<!-- 判断题 -->
				<div v-if="subject=='A1'">
					<el-collapse-item name="1">
						<template slot="title" name="1">
							<div class="titlei">{{this.judge.chooseType=='1'?'判断题':'判断题'}}({{this.judge.topicLevel}})
							</div>
						</template>
						<div class="contenti">
							<ul class="question">
								<li>
									<h3>{{this.judge.topicName}}(T/F)</h3>
								</li>
								<li>我的答案：{{this.answer.answerContent}}</li>
								<li>参考答案：{{this.judge.topicAnswer}}</li>
							</ul>
						</div>
					</el-collapse-item>
					<el-collapse-item name="1">
						<template slot="title" name="2">
							<div class="titlei">试题解析</div>
						</template>
						<div class="contenti">
							<ul class="question">
								<li>{{this.judge.analysis}}</li>
							</ul>
						</div>
					</el-collapse-item>
				</div>
				<!-- 填空题 -->
				<div v-if="subject=='A2'">
					<el-collapse-item name="1">
						<template slot="title" name="1">
							<div class="titlei">{{this.insert.chooseType=='2'?'填空题':'填空题'}}({{this.insert.topicLevel}})
							</div>
						</template>
						<div class="contenti">
							<ul class="question">
								<li>
									<h3>{{this.insert.topicName}}</h3>
								</li>
								<li>我的答案：{{this.answer.answerContent}}</li>
								<li>参考答案：{{this.insert.topicAnswer}}</li>
							</ul>
						</div>
					</el-collapse-item>
					<el-collapse-item name="1">
						<template slot="title" name="2">
							<div class="titlei">试题解析</div>
						</template>
						<div class="contenti">
							<ul class="question">
								<li>{{this.insert.analysis}}</li>
							</ul>
						</div>
					</el-collapse-item>
				</div>
				<!-- 综合题 -->
				<div v-if="subject=='A3'">
					<el-collapse-item name="1">
						<template slot="title" name="1">
							<div class="titlei">{{this.obj.chooseType=='3'?'综合题':'综合题'}}({{this.obj.topicLevel}})
							</div>
						</template>
						<div class="contenti">
							<ul class="question">
								<li>
									<h3>{{this.obj.topicName}}</h3>
								</li>
								<li>我的答案：{{this.answer.answerContent}}</li>
								<li>参考答案：{{this.obj.topicAnswer}}</li>
							</ul>
						</div>
					</el-collapse-item>
					<el-collapse-item name="1">
						<template slot="title" name="2">
							<div class="titlei">试题解析</div>
						</template>
						<div class="contenti">
							<ul class="question">
								<li>{{this.obj.analysis}}</li>
							</ul>
						</div>

					</el-collapse-item>
				</div>
			</el-collapse>


		</div>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				subject: '0', //判断显示的ui
				choosesingle: [], //单选题
				choosemult: [], //多选题
				judge: [], //判断题
				judgeA:'',//判断题
				judgeB:'',//选择题
				insert: [], //填空题
				obj: [], //综合题
				answer: [], //答题卡信息
				dialogVisible: true, //对话框属性
				activeName: '1', //默认打开序号
				topicCount: [], //每种类型题目的总数
				score: [], //每种类型分数的总数
				examData: { //考试信息
					// source: null,
					// totalScore: null,
				},
				topic: { //试卷信息
				},
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			//初始化页面数据
			init() {
				let examCode = this.$route.query.examCode //获取路由传递过来的试题编号
				let userId = this.$cookies.get("cid")

				//获取试题
				this.$axios(`/api/getTopicById/${examCode}`).then(res => { //通过examCode请求试题详细信息
					if (res.data.topicLevel == 1) {
						res.data.topicLevel = "简单"
					} else if (res.data.topicLevel == 2) {
						res.data.topicLevel = "一般"
					} else if (res.data.topicLevel == 3) {
						res.data.topicLevel = "困难"
					}

					//判断题
					if (res.data != null && res.data.topicType == 1) {
						this.subject = 'A1'
						this.judge = res.data
						
					} else if (res.data != null && res.data.topicType == 2) {
						//填空题
						this.subject = 'A2'
						this.insert = res.data
					} else if (res.data != null && res.data.topicType == 3) {
						//综合题
						this.subject = 'A3'
						this.obj = res.data
					}

				})
				//获取选择题
				this.$axios(`/api/getMultById/${examCode}`).then(res => { //通过examCode请求试题详细信息
					if (res.data.chooseLevel == 1) {
						res.data.chooseLevel = "简单"
					} else if (res.data.chooseLevel == 2) {
						res.data.chooseLevel = "一般"
					} else if (res.data.chooseLevel == 3) {
						res.data.chooseLevel = "困难"
					}

					//单选题
					if (res.data != null && res.data.chooseType == 1) {
						this.subject = 'B1'
						this.choosesingle = res.data
						//多选题
					} else if (res.data != null && res.data.chooseType == 2) {
						this.subject = 'B2'
						this.choosemult = res.data
					}
				})

				//获取学生答题卡的信息
				this.$axios(`/api/coll/getAnswerById/${examCode}/${userId}`).then(res => { //通过examCode请求试题详细信息
					console.log(res.data)
					this.answer = res.data
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.bottom {
		.right {
			.el-button {
				color: #409EFF;
				border-color: #c6e2ff;
				background-color: #ecf5ff;
			}
		}
	}

	.right {
		margin-left: auto;
	}

	.inner .contenti .question {
		margin-left: 40px;
		color: #9a9a9a;
		font-size: 14px;
	}

	.content .inner .titlei {
		margin-left: 20px;
		font-size: 16px;
		color: #88949b;
		font-weight: bold;
	}

	.content .title .time {
		font-size: 16px;
		margin-left: 420px;
		color: #999;
	}

	.content .stitle {
		background-color: #0195ff;
	}

	.content .title span {
		margin-right: 10px;
	}

	#msg .content .title {
		font-size: 20px;
		margin: 0px;
		display: flex;
		align-items: center;
	}

	.content {
		margin-top: 20px;
		background-color: #fff;
	}

	.content .header {
		padding: 10px 30px;
	}

	.wrapper .info {
		margin: 20px 0px 0px 20px;
		border-top: 1px solid #eee;
		padding: 20px 0px 10px 0px;
	}

	.wrapper .info a {
		color: #88949b;
		font-size: 14px;
	}

	.wrapper .info a:hover {
		color: #0195ff;
	}

	.wrapper .bottom .btn {
		cursor: pointer;
		padding: 5px 10px;
		border: 1px solid #88949b;
		border-radius: 4px;
	}

	.wrapper .bottom {
		display: flex;
		margin-left: 20px;
		color: #999;
		font-size: 14px;
		align-items: center;
	}

	.wrapper .bottom li {
		margin-right: 14px;
	}

	#msg {
		background-color: #eee;
		width: 980px;
		margin: 0 auto;
	}

	#msg .title {
		margin: 20px;
	}

	#msg .wrapper {
		background-color: #fff;
		padding: 10px;
	}

	.wrapper .top {
		display: flex;
		margin: 20px;
		align-items: center;
	}

	.wrapper .top .right {
		margin-left: auto;
	}

	.wrapper .top .example {
		color: #333;
		font-size: 22px;
		font-weight: 700;
	}

	.wrapper .top li i {
		margin-left: 20px;
		color: #88949b;
	}

	.wrapper .right .count {
		margin-right: 60px;
		color: #fff;
		padding: 4px 10px;
		background-color: #88949b;
		border-top-left-radius: 4px;
		border-bottom-left-radius: 4px;
		border: 1px solid #88949b;
	}

	.wrapper .right .score {
		position: absolute;
		left: 53px;
		top: -5px;
		padding: 1px 12px;
		font-size: 20px;
		color: #88949b;
		border: 1px dashed #88949b;
		border-left: none;
		border-top-right-radius: 4px;
		border-bottom-right-radius: 4px;
		font-weight: bold;
	}

	.wrapper .right div {
		position: relative;
	}

	.el-tag.el-tag--success {
		background-color: #f0f9eb;
		border-color: #e1f3d8;
		color: #67c23a;
	}
	
	.back{
		position: absolute;
		left: 208px;
		top: 81px;
	}
</style>
